
<div class="big-img">
	<div class="swiper-container2 swiper-container-horizontal">
		<div class="swiper-wrapper"></div>
	</div>
	<div class="swiper-pagination2 swiper-pagination-bullets">
		<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
	</div>
</div>

<link rel="stylesheet" href="__STATIC__/Zz22zzUI/addon/swiper/swiper.min.css">
<script type="text/javascript" src="__STATIC__/Zz22zzUI/addon/swiper/swiper.jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/Zz22zzUI/addon/pinchzoom/pinchzoom.js"></script>
<style>
.big-img{position:fixed;z-index:-1;opacity:0;background:rgba(0,0,0,.9);width:100%;height:100%;top:0;left:0}
.big-img .swiper-container2{position:relative;width:100%;height:100%}
.big-img .swiper-container2 .swiper-wrapper{width:100%;height:100%}
.big-img .swiper-slide{width:100%;height:100%;}
.big-img .swiper-slide .pinch-zoom-container{width: 100%;height: 100%;}
.big-img .swiper-slide .pinch-zoom{width:100%;height:100%;display: table;}
.big-img .swiper-slide .img-cell{width: 100%;height: 100%;display:table-cell;vertical-align:middle;text-align:center}
.big-img .swiper-slide .pinch-zoom img{width:100%;-webkit-user-drag: none;}
.big-img .swiper-pagination2{position:absolute;top:.2rem;text-align:center;width:100%}
.big-img .swiper-pagination2 span{margin:0 .05rem}
</style>
<script>
$(document).ready(function(){
	var isZoom = 0;
	/*调起大图*/
	var mySwiper = new Swiper('.swiper-container2', {
		loop: false,
		pagination: '.swiper-pagination2',
	})
	$(".J_photoswiper").on("click", "img", function() {
		var imgBox = $(".J_photoswiper").find("img");
		var i = $(imgBox).index(this);
		//console.log('i:'+i)
		$(".big-img .swiper-wrapper").html("")

		for(var j = 0 ,c = imgBox.length; j < c ;j++){
			$(".big-img .swiper-wrapper").append('<div class="swiper-slide"><div class="pinch-zoom"><div class="img-cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div></div>');
		}
	    
		mySwiper.updateSlidesSize();
		mySwiper.updatePagination();
		$(".big-img").css({
			"z-index": 1001,
			"opacity": "1"
		});
		mySwiper.slideTo(i, 0, false);

	    $('.big-img').find('.pinch-zoom').each(function () {
	        new RTP.PinchZoom($(this), {
		        draggableUnzoomed : false,
			    onZoomStart: function(object, event){
				    //alert('pz_zoomstart')
				    isZoom = 1;
			    },
			    onZoomEnd: function(object, event){
				    //alert('pz_dragstart')
				    isZoom = 0;
			    },
			    onDragStart: function(object, event){
				    //alert('pz_zoomstart')
				    isZoom = 1;
			    },
			    onDragEnd: function(object, event){
				    //alert('pz_zoomstart')
				    isZoom = 0;
			    },
			    onDoubleTap: function(object, event){
				    //alert('onDoubleTap')
				    //isZoom = 0;
					$(".big-img").css({
						"z-index": "-1",
						"opacity": "0"
					});
			    }
	        });
	    });
	    
		return false;
	});
// 	$(".big-img").on("touchend", function(e){
// 		e.preventDefault();
// 		//alert(isZoom)
// 		if(isZoom == 0){
// 			$(this).css({
// 				"z-index": "-1",
// 				"opacity": "0"
// 			});
// 		}
// 	});
});
</script>